<template>
  <div id="bingmap-container"></div>
</template>
<script>
import * as Cesium from 'cesium';
export default {
  data() {
    return {
      viewer: null
    };
  },
  mounted() {
    const viewer = new Cesium.Viewer('bingmap-container', {
      baseLayerPicker: false, // 地图选择按钮
      geocoder: false, // 搜索按钮，
      homeButton: false, // 跳转主页按钮
      animation: false, // 动画按钮
      creditsDisplay: false, //
      timeline: false, // 时间轴按钮
      fullscreenButton: false, // 全屏功能显示按钮
      scene3DOnly: false,
      navigationHelpButton: false, // 操作帮助按钮
      infoBox: false,
      selectionIndicator: false,
      sceneModePicker: false, // 是否开启平面图选择
      terrainShadows: Cesium.ShadowMode.DISABLED,
      shouldAnimate: true
    });
    // 设置初始位置
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(110.2, 34.55, 20000000)
    });
    //  去除水印
    viewer._cesiumWidget._creditContainer.style.display = 'none';
    // 高德标注
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
      })
    );
    //
    // primitive方式
    // var instance = new Cesium.GeometryInstance({
    //   geometry: new Cesium.RectangleGeometry({
    //     rectangle: Cesium.Rectangle.fromDegrees(105.2, 30.55, 106.2, 31.55),
    //     vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
    //   })
    // });
    // viewer.scene.primitives.add(
    //   new Cesium.Primitive({
    //     geometryInstances: instance,
    //     appearance: new Cesium.EllipsoidSurfaceAppearance({
    //       material: Cesium.Material.fromType('Stripe')
    //     })
    //   })
    // );

    var instances = [];
    for (var lon = -180.0; lon < 180.0; lon += 5.0) {
      for (var lat = -90.0; lat < 90.0; lat += 5.0) {
        instances.push(
          new Cesium.GeometryInstance({
            id: `rectangle-${lon}-${lat}`,
            geometry: new Cesium.RectangleGeometry({
              rectangle: Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0)
            }),
            attributes: {
              color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                Cesium.Color.fromRandom({
                  alpha: 0.5
                })
              )
            }
          })
        );
      }
    }

    const primitive = new Cesium.Primitive({
      geometryInstances: instances, // 合并
      // 某些外观允许每个几何图形实例分别指定某个属性，例如：
      appearance: new Cesium.PerInstanceColorAppearance()
    });
    viewer.scene.primitives.add(primitive);

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    // 设置单击事件的处理句柄
    handler.setInputAction(function (movement) {
      var pick = viewer.scene.pick(movement.position);
      if (Cesium.defined(pick) && pick.id) {
        const attributes = primitive.getGeometryInstanceAttributes(pick.id);
        attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.GREENYELLOW);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    this.viewer = viewer;
  },

  methods: {}
};
</script>
<style lang="scss" scoped>
#bingmap-container {
  height: 100%;
  position: relative;
  cursor: crosshair;
}
</style>
